<!-- 首页  -->
<template>
    <div class="home">
        <School @add="save" ref="schoolComp" @addRole="addRole" :tipBtnGroup="Tips"></School>
        <div class="list">
            <div v-for="(item, index) in Roles" :key="index" class="role relative">
                <div
                    class="role-name relative my-1 w-12 h-8 text-center text-ellipsis overflow-hidden text-nowrap bg-slate-500 rounded-sm p-1 mr-2">
                    {{ item.name }}
                </div>
                <el-tooltip class="box-item" effect="dark" content="新增装备" placement="right">
                    <div class="absolute left-12 top-1 cursor-pointer"
                        @click="schoolComp.dialogTableVisible = true; activeRole = item.name">
                        <el-icon color="#67C23A">
                            <CirclePlus />
                        </el-icon>
                    </div>
                </el-tooltip>
                <div class="equips" v-if="isLoaded">
                    <div v-for="(equip, index1) in item.equips" v-show="showEquip(equip)"
                        class="equip relative mr-2 bg-slate-700 rounded-sm p-1 my-1 h-auto">
                        <div class="equip-icon w-8 h-8 rounded-lg overflow-hidden">
                            <img :src="getLiveImage(equip.id)" alt="" class="w-full h-full">
                        </div>
                        <div class="flex mt-1">
                            <div v-for="(label, lbIdx) in equip.info" :key="lbIdx" class="w-2 h-2 rounded-sm"
                                :style="{ backgroundColor: getColor(label) }" style="margin-right: 1px;">
                            </div>
                        </div>
                        <div class="equip-tips" v-if="!equip.free">
                            <TypeComp :list="equip.info" :id="equip.id"></TypeComp>
                        </div>
                        <div v-if="equip.free" class="equip-free absolute left-1 top-0">
                            <el-icon color="#F1BF0F">
                                <StarFilled />
                            </el-icon>
                        </div>
                        <div class="equip-free absolute -right-2 -top-2 cursor-pointer"
                            @click="removeEquip(equip, item.name)">
                            <el-icon>
                                <CircleCloseFilled />
                            </el-icon>
                        </div>
                    </div>
                </div>
                <div class="equip-free absolute -right-2 -top-2 cursor-pointer" @click="removeRole(item.name)">
                    <el-icon>
                        <CircleCloseFilled />
                    </el-icon>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, computed } from 'vue'
import School from "@/components/school/school.vue"
import { type RoleMessage, type EquipType, regionEnum, SuitType, type TipsType, type equipMessageType } from '@/types/defaults'
import TypeComp from '@/components/TypeComp.vue'
import { eqs } from '@/static/IdList'

import { http } from '@/api/request'
import { ElMessage } from 'element-plus';
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'
const $store = useCounterStore();
const { iconList, descList } = storeToRefs($store)
const axios = new http();
const ipcRenderer = require('electron').ipcRenderer;
const Roles = ref<RoleMessage[]>([]);
const Tips = ref<TipsType[]>([]);
const schoolComp = ref<any>();
const getColor = (idx: number) => {
    let color = '#000'
    Tips.value.forEach(item => {
        if (item.belongIds.indexOf(idx) > -1) {
            color = item.color
        }
    })
    return color
}
onMounted(() => {
    ipcRenderer.on('person-list', (event: Electron.IpcRendererEvent, arg: any) => {
        if (arg.action == 'getTipsList') {
            Tips.value = JSON.parse(arg.data)
        } else {
            event.sender.send("render-msg", 'getTipsList')
        }
    })
    ipcRenderer.send("render-msg", 'getTipsList');

    ipcRenderer.on('person-list', (event: Electron.IpcRendererEvent, arg: any) => {
        if (arg.action == "getList") {
            Roles.value = JSON.parse(arg.data);
            loadImages();
        } else if (arg.action == "writeList") {
            event.sender.send("render-msg", 'getList')
        }
    })
    ipcRenderer.send("render-msg", 'getList');
    getEquipIcons()
})
const isLoaded = ref(false);
const loadImages = () => {
    Roles.value.forEach(role => {
        role.equips.forEach(async equip => {
            if ($store.descExist(equip.id) == -1) {
                const msg = await axios.getSingleEquipment(equip.id)
                $store.addDesc(equip.id, msg.data);
            }
            // equip.info.forEach(async school => {
            //     if ($store.descExist(school) == -1) {
            //         const msg = await axios.getSingleEquipment(school)
            //         $store.addDesc(school, msg.data);
            //     }
            // })
        })
    });
    isLoaded.value = true
}
const activeRole = ref('');
const save = (messages: EquipType) => {
    const role = Roles.value.findIndex(e => e.name == activeRole.value);
    Roles.value[role].equips.push(messages);
    ipcRenderer.send("render-msg", 'writeList', JSON.parse(JSON.stringify(Roles.value)));
    ElMessage.success("新增成功！")
}
const addRole = (name: string) => {
    Roles.value.push({ "name": name, "equips": [] })
    ipcRenderer.send("render-msg", 'writeList', JSON.parse(JSON.stringify(Roles.value)));
    ElMessage.success("新增成功！")
}

const removeRole = (name: string) => {
    const roleIdx = Roles.value.findIndex(e => e.name == name);
    Roles.value.splice(roleIdx, 1);
    ipcRenderer.send("render-msg", 'writeList', JSON.parse(JSON.stringify(Roles.value)));
    ElMessage.error("删除成功！")
}
const getEquipIcons = () => {
    eqs.forEach((arrs: number[], index: number) => {
        $store.addIconArray()
        arrs.forEach(async (item: number, index1: number) => {
            $store.addIcon((await axios.getEquipment(item)).data, index, index1)
        })
    })
}

const removeEquip = (equip: EquipType, name: string) => {
    const role = Roles.value.findIndex(e => e.name == name);
    Roles.value[role].equips.forEach((item, index) => {
        if (JSON.stringify(item) == JSON.stringify(equip)) {
            Roles.value[role].equips.splice(index, 1);
        }
    });
    ipcRenderer.send("render-msg", 'writeList', JSON.parse(JSON.stringify(Roles.value)));
    ElMessage.success("删除成功！")
}

const getLiveImage = (imgId: number) => {
    let ans: string = ''
    iconList.value.forEach((item) => {
        item.forEach((its) => {
            if (its.id == imgId) {
                ans = its.icon
            }
        })
    })
    return ans
}
const showEquip = (equip: EquipType) => {
    return true
}
</script>
<style scoped lang='less'>
/* @import url(); 引入css类 */
.role {
    display: flex;
    background-color: #0005;
    margin-bottom: .5rem;
    border-radius: 5px;
    box-shadow: 0 0 5px #6d6d6d;
    box-sizing: border-box;
    padding: 0.5rem;

    .equips {
        display: flex;
        flex-wrap: wrap;

        .equip {
            transition: all .2s;

            &:hover {
                .equip-tips {
                    transition: all 0.5s;
                    width: auto;
                    height: auto;
                }

            }

            .equip-tips {
                transition: all .2s;
                // width: 0px;
                // height: 0px;
                // overflow: hidden;
            }
        }

    }
}
</style>